<template>
	<view>
		<view class='list acea-row row-between-wrapper'>
			<navigator url='/pages/users/detailed_info/detailed_info?type=splicing' class='item acea-row row-center-wrapper row-column'>
				<text class='iconfont icon-qiandai'></text>
				<text class='iconfont1'>拼单次数</text>
				<view>剩余拼单次数：{{userInfo.splicing_number}}次</view>
			</navigator>
			<navigator url='/pages/users/detailed_info/detailed_info?type=direct' class='item acea-row row-center-wrapper row-column'>
				<text class='iconfont icon-dingdan'></text>
				<text class='iconfont1'>直购次数</text>
				<view>剩余直购次数：{{userInfo.direct_number}}次</view>
			</navigator>
			<navigator url='/pages/users/detailed_info/detailed_info?type=integral' hover-class="none"
				class='item acea-row row-center-wrapper row-column'>
				<text class='iconfont icon-jifen'></text>
				<text class='iconfont1'>积分</text>
				<view>剩余积分：{{userInfo.integral}}</view>
			</navigator>
			<navigator url='/pages/users/detailed_info/detailed_info?type=diamond' hover-class="none"
				class='item acea-row row-center-wrapper row-column'>
				<text class='iconfont icon-jifenzhongxin'></text>
				<text class='iconfont1'>钻石数量</text>
				<view>剩余钻石：{{userInfo.diamond}}</view>
			</navigator>
			<navigator url='/pages/users/detailed_info/detailed_info?type=universal' hover-class="none"
				class='item acea-row row-center-wrapper row-column'>
				<text class='iconfont icon-pc-jifen'></text>
				<text class='iconfont1'>通用券</text>
				<view>通用券：{{userInfo.universal_volume}}</view>
			</navigator>
			<navigator url='/pages/users/detailed_info/detailed_info?type=limited' hover-class="none"
				class='item acea-row row-center-wrapper row-column'>
				<text class='iconfont icon-pc-jifen'></text>
				<text class='iconfont1'>限时券</text>
				<view>限时券：{{userInfo.limited_volume}}</view>
			</navigator>
			<!-- <navigator url='/pages/users/detailed_info/detailed_info?type=activity' hover-class="none"
				class='item acea-row row-center-wrapper row-column'>
				<text class='iconfont'>活跃度</text>
				<view>剩余活跃度：{{userInfo.activity}}</view>
			</navigator> -->
		</view>
	</view>
</template>

<script>
	import {
		getUserInfo
	} from '@/api/user.js';
	export default {
		data() {
			return {
				userInfo: {}
			}
		},
		onShow() {
			this.getUserInfo();
		},
		methods: {
			getUserInfo: function() {
				let that = this;
				getUserInfo().then(res => {
					that.userInfo = res.data;
				});
			},
		}
	}
</script>

<style lang="scss">
	.list {
		padding: 0 20rpx 50rpx 20rpx;
		margin-top: 10rpx;
	}

	.list .item {
		width: 345rpx;
		height: 240rpx;
		border-radius: 20rpx;
		background-color: #fff;
		margin-top: 20rpx;
		font-size: 30rpx;
		color: #666;
	}
	
	.list .item .iconfont {
		font-size: 70rpx;
		// background-image: linear-gradient(to right, #fc4d3d 0%, #e93323 100%);
		background-color: rgba(29,176,252,1);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		margin-bottom: 20rpx;
	}
	
	.list .item .iconfont1 {
		font-size: 35rpx;
		margin-bottom: 20rpx;
	}
</style>